<template>
	<view class="mix-empty" :style="{backgroundColor: backgroundColor}">
		<view v-if="type==='cart'" class="cart column center">
			<image class="icon" src="/static/img/empty/cart.png"></image>
			<text class="title">空空如也</text>
			<text class="text">别忘了买点什么犒赏一下自己哦</text>
			<view class="btn center" @tap="jumpToHom">
				<text>随便逛逛</text>
			</view>
		</view>
		<view v-else-if="type==='address'" class="address column center">
			<image class="icon" src="/static/img/empty/address.png"></image>
			<text class="text">找不到您的收货地址哦，先去添加一个吧~</text>
			<view class="btn center" @tap="navTo('/packageA/pages/editAddress/editAddress')">
				<text class="iconfont iconaddApp"></text>
			</view>
		</view>
		<view v-else-if="type==='favorite'" class="favorite column center">
			<image class="icon" src="/static/img/empty/favorite.png"></image>
			<text class="text">收藏夹空空的，先去逛逛吧~</text>
			<view class="btn center" @tap="jumpToHome">
				<text>随便逛逛</text>
			</view>
		</view>
		<view v-else class="default column center">
			<image class="icon" src="/static/img/nulldata.svg"></image>
			<text class="text">{{ text }}</text>
		</view>
	</view>
</template>

<script>
	/**
	 * 缺省显示
	 * @prop text 缺省文字提示
	 * @prop type 缺省类型
	 * @prop backgroundColor 缺省页面背景色
	 */
	export default {
		computed: {
			hasLogin(){
				return true
				// return !!this.$store.getters.hasLogin;
			}
		},
		props: {
			text: {
				type: String,
				default: '暂时没有数据'
			},
			type: {
				type: String,
				default: ''
			},
			backgroundColor: {
				type: String,
				default: 'rgba(0,0,0,0)'
			}
		},
		data(){
			return{}
		},
		methods: {
			// onCartBtnClick(){
			// 	uni.reLaunch({
			// 		url:'/pages/home/home'
			// 	})
			// },
			switchTab(url){
				uni.switchTab({
					url
				})
			},
			jumpToHome(){
				uni.reLaunch({
					url:'/pages/home/home'
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.mix-empty{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		animation: show .5s 1;
	}
	@keyframes show{
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	.default{
		padding-top: 26vh;
		/* #ifdef H5 */
		padding-top: 30vh;
		/* #endif */
		
		.icon{
			width: 460rpx;
			height: 342rpx;
		}
		.text{
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #999;
		}
	}
	.cart{
		padding-top: 14vh;
		/* #ifdef H5 */
		padding-top: 18vh;
		/* #endif */
		
		.icon{
			width: 320rpx;
			height: 320rpx;
		}
		.title{
			margin: 50rpx 0 26rpx;
			font-size: 34rpx;
			color: #333;
		}
		.text{
			font-size: 28rpx;
			color: #aaa;
		}
		.btn{
			width: 320rpx;
			height: 80rpx;
			margin-top: 80rpx;
			text-indent: 2rpx;
			letter-spacing: 2rpx;
			font-size: 32rpx;
			color: #fff;
			border-radius: 100rpx;
			// background: linear-gradient(to bottom right, #ffb2bf, $themeColor1);
			background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
			box-shadow: 0px 4rpx 20rpx 0px rgba(83, 0, 0, 0.24);
		}
	}
	.address{
		padding-top: 6vh;
		/* #ifdef H5 */
		padding-top: 10vh;
		/* #endif */
		color: #fff;

		.icon{
			width: 380rpx;
			height: 380rpx;
		}
		.text{
			width: 400rpx;
			margin-top: 40rpx;
			font-size: 30rpx;
			color: #999;
			text-align: center;
			line-height: 1.6;
		}
		.btn{
			position: fixed;
			left: 50%;
			bottom: 120rpx;
			width: 110rpx;
			height: 110rpx;
			// background-color: $themeColor1;
			background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
			box-shadow: 0px 4rpx 20rpx 0px rgba(83, 0, 0, 0.24);
			border-radius: 100rpx;
			transform: translateX(-50%);
			// box-shadow: 2rpx 2rpx 10rpx rgba(255, 83, 111, .5);
			text{
				font-size: 48rpx;
			}
		}
		.icon-jia2{
			font-size: 50rpx;
			color: #fff;
		}
	}
	.favorite{
		padding-top: 6vh;
		/* #ifdef H5 */
		padding-top: 10vh;
		/* #endif */
		
		.icon{
			width: 360rpx;
			height: 360rpx;
		}
		.text{
			width: 400rpx;
			margin-top: 40rpx;
			font-size: 30rpx;
			color: #999;
			text-align: center;
			line-height: 1.6;
		}
		.btn{
			width: 320rpx;
			height: 80rpx;
			margin-top: 40rpx;
			text-indent: 2rpx;
			letter-spacing: 2rpx;
			font-size: 32rpx;
			color: #fff;
			border-radius: 100rpx;
			background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
			box-shadow: 0px 4rpx 20rpx 0px rgba(83, 0, 0, 0.24);
		}
	}
</style>
